<template>
	<div class="info">
		<img class="about-bg" src="../../assets/img/xinxipiloubg@2x.png" />
    <div style="width: 100%;text-align: center;color: #FFFFFF;font-size: 84px;font-weight: bold;margin-top: -188px;">专业的信息披露平台</div>


		<el-row type="flex" justify="center" style="margin-top: 92px;">
			<el-row class="Navsousuo" type="flex" justify="space-between">
				<el-col>
					<el-breadcrumb separator="/" style="font-size: 13px;">
						<el-breadcrumb-item>当期那位置：信息披露</el-breadcrumb-item>
						<el-breadcrumb-item>{{ PageName }}</el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>
				<el-col style="width: 335px;height: 38px;">
					<el-input placeholder="请输入内容" :clearable="true" v-model="sousuoneirong">
						<el-button slot="append" icon="el-icon-search" @click="Sousuo"></el-button>
					</el-input>
				</el-col>
			</el-row>
		</el-row>
		<el-row type="flex" justify="center">
			<el-tabs class="wlmainW" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="公告" name="goggao" >
          <div style="width: 100%;height: 20px;background-color: #FFFFFF; padding: 10px  15px;z-index: 99;">


             <el-radio @change="fenleishaixuan"  size="mini" v-model="activeNameShaixuan" label="listing" border>挂牌公告</el-radio>
             <el-radio @change="fenleishaixuan" size="mini" v-model="activeNameShaixuan" label="establishing" border>成立公告</el-radio>
             <el-radio @change="fenleishaixuan" size="mini" v-model="activeNameShaixuan" label="cashing3" border>兑付公告</el-radio>


          </div>

          <newsXiangqing v-if="isshowXiangqing" @WLxiangqingguanbi = "WLxiangqingguanbi" :Newxiangqingdata = "xiangqingdata"></newsXiangqing>

					<WLNewsTable  v-if="isRouterAlive && !isshowXiangqing" :Newdata="gogngaoList" :Newtotal = "zilvshengmingtotal" :Newpagedangqianye = "pagedangqianye" :Newname = "3" @WLpageindex = "WLpageindex" @WLcellClick = "WLcellClick" ></WLNewsTable>
				</el-tab-pane>
				<el-tab-pane label="新闻" name="xinwen" >

          <newsXiangqing v-if="isshowXiangqing" @WLxiangqingguanbi = "WLxiangqingguanbi" :Newxiangqingdata = "xiangqingdata"></newsXiangqing>


					<WLNewsTable v-if="isRouterAlive && !isshowXiangqing" :Newdata="WLnewsList" :Newtotal = "xinwentotal" :Newpagedangqianye = "pagedangqianye" :Newname = "3"  @WLpageindex = "WLpageindex" @WLcellClick = "WLcellClick"></WLNewsTable>

				</el-tab-pane>

			</el-tabs>
		</el-row>

	</div>
</template>

<script>
import WLNewsTable from '@/components/News/WLNewsTable.vue';
import newsXiangqing from '@/components/News/newsXiangqing.vue';
import { getZhengcefaguiList } from "@/api/zhengcefagui.js";
import { getnewsXaingqign } from "@/api/zhengcefagui.js";
var pageNo;
var pageSize;
export default {
	name: 'Info',
	components: {
		WLNewsTable,
    newsXiangqing
	},

	data() {
		return {
			sousuoneirong: '',
			PageName: '公告',
			activeName: 'goggao', //选中了哪里
      activeNameShaixuan: 'listing', //选中了哪里筛选
      searchData:'',
      activeindexname:'notice',
      activeindex:0,
      isRouterAlive: true,
      //判断显示隐藏详情
            isshowXiangqing:false,
            xiangqingdata:'',
      gonggaototal:0,//总条数
      xinwentotal:0,//总条数

      zilvshengmingtotal:0,//总条数
      pagedangqianye:1,//当前页

			zhengcexianfaList: [
			],
			gogngaoList: [
			],
			WLnewsList: [
			]
		};
	},
	computed: {},
	watch: {},
	methods: {




    getNewdata(){
          const _self = this;

          let secondtypestr = _self.activeNameShaixuan;

          if (this.activeindex == 1){
            secondtypestr = '';
          }
            getZhengcefaguiList({
              firstType:_self.activeindexname,
              secondType:secondtypestr,
              pageNo:pageNo,
              pageSize:pageSize
             }).then((res) => {
               let { success, message } = res.data;
               if (success) {
                 // _self.$message.success(message);
                if (this.activeindex == 0){

                   _self.zilvshengmingtotal = res.data.result.total;
                   _self.gogngaoList = [];
                   _self.gogngaoList =  res.data.result.records;

                }else  if (this.activeindex == 1){

                    _self.xinwentotal = res.data.result.total;
                    _self.WLnewsList = [];
                    _self.WLnewsList =  res.data.result.records;

                }
                this.isRouterAlive = false
                this.$nextTick(() => (this.isRouterAlive = true))





               } else {
                 _self.$message.error(message);
               }
             });

    },





    WLxiangqingguanbi(){
      this.isshowXiangqing = false;

    },
		Sousuo() {
			// console.log(this.sousuoneirong);
      if (this.sousuoneirong) {
        this.$router.push({
          path: '/search',
          query: {
            keyword: this.sousuoneirong
          }
        })
      } else {
        this.$message.error('请输入关键字搜索')
      }
		},
		handleClick(tab, event) {
      pageNo = 1;
      this.pagedangqianye = 1;

      this.isshowXiangqing = false;
				this.PageName = tab.label;

        this.activeindex = tab.index;
        if (tab.index == 0){
           this.activeindexname = 'notice';
        }else  if (tab.index == 1){
           this.activeindexname = 'news';
        }


        this.getNewdata();
		},
    //分类筛选
    fenleishaixuan(){
       pageNo = 1;
       this.pagedangqianye = 1;

       this.getNewdata();
    },
		//进入详情
		WLcellClick(val) {


			const _self = this;
			  getnewsXaingqign({
			    id:val.id
			   }).then((res) => {
			     let { success, message } = res.data;
			     if (success) {
			       // _self.$message.success(message);

			       this.xiangqingdata = res.data.result.content;


			       this.isshowXiangqing = true;





			     } else {
			       _self.$message.error(message);
			     }
			   });


		},
		//监听页数
		WLpageindex(val){
		pageNo = val;
		this.pagedangqianye = pageNo;
		this.getNewdata();
		}

	},
	created() {

   let homedata =  this.$route.query;


    //判断是否首页进来
    if(homedata.HomeType == 0 || homedata.HomeType == 1){


      if (homedata.HomeType == 1){

        this.activeName = "xinwen";
        this.activeindexname = 'news';
      }


      if (homedata.HomeId){
        this.activeindex = +homedata.HomeType;
        pageNo = 1;
        pageSize = 15;
        this.getNewdata();
        //进入详情

        const _self = this;
          getnewsXaingqign({
            id:homedata.HomeId
           }).then((res) => {
             let { success, message } = res.data;
             if (success) {
               // _self.$message.success(message);

               this.xiangqingdata = res.data.result.content;


               this.isshowXiangqing = true;





             } else {
               _self.$message.error(message);
             }
           });




      }else{
        //more
        this.activeindex = +homedata.HomeType;
        pageNo = 1;
        pageSize = 15;
        this.getNewdata();
      }






    }else{
      pageNo = 1;
      pageSize = 15;
      this.getNewdata();
    }



	},
	mounted() {
	}
};
</script>

<style lang="less">
.info {
	background-color: #f0f0f0;
	//重写样式
	.is-active {
		color: #ffffff !important;
		background-color: #1d3f95 !important;
		border-radius: 10px 10px 0px 0px;
	}
	.el-tabs__item {
		color: #1d3f95;
		padding: 0;
		width: 120px;
		text-align: center;
		height: 42px;
	}
	.el-tabs__nav-wrap::after {
		background-color: #1d3f95;
	}
	.el-tabs__active-bar {
		background-color: #1d3f95;
	}

  .el-radio.is-bordered.is-checked {
      border-color: #1d3f95;
  }
  .el-radio__input.is-checked+.el-radio__label {
      color: #1d3f95;
  }
  .el-radio__input.is-checked .el-radio__inner {
      border-color: #1d3f95;
      background: #1d3f95;
  }
}
// .tablediv {
// 	width: 1200px;
// 	max-height: 940px;
// 	padding: 30px;
// 	background-color: #ffffff;
// }
.wlmainW {
	width: 1200px;
}
.Navsousuo {
	width: 1200px;
	height: 70px;
	// background-color: antiquewhite;
	padding: 16px;
}
.about-bg {
	width: 100%;
	min-width: 1200px;
	min-height: 370px;
}
.header {
	width: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
}
.footer {
	width: 100%;
	position: absolute;
	z-index: 10;
	bottom: -120px;
}

//重写tab样式
</style>
